<template>
    <div>
        <div class="big">
            <div class="line1">
                <img src="../../assets/views/xinnegyuan/1.jpg" alt="">
            </div>
            <div class="line2">
                <div class="top">
                    <p>销量排行</p><span>更多<i class="el-icon-arrow-right"></i></span>
                </div>
                <div class="bot">
                    <div class="small">
                        <img src="../../assets/views/xinnegyuan/2.jpg" alt="">

                    </div>
                    <div class="small">
                        <img src="../../assets/views/xinnegyuan/3.jpg" alt="">

                    </div>
                    <div class="small">
                        <img src="../../assets/views/xinnegyuan/4.jpg" alt="">

                    </div>
                    <div class="small">
                        <img src="../../assets/views/xinnegyuan/5.jpg" alt="">

                    </div>
                    <div class="small">
                        <img src="../../assets/views/xinnegyuan/5.jpg" alt="">

                    </div>
                    <div class="small">
                        <img src="../../assets/views/xinnegyuan/5.jpg" alt="">

                    </div>
                    <div class="small">
                        <img src="../../assets/views/xinnegyuan/5.jpg" alt="">

                    </div>
                </div>
            </div>
            <div class="line3">
                <div class="up">
                    <p>热门品牌</p>
                    <p>品牌选车</p>
                    <p>条件选车</p>
                </div>
                <div class="down">
                    <div class="imgs">
                        <div class="inn"><img src="../../assets/views/xinnegyuan/6.jpg" alt=""></div>
                        <div class="inn"><img src="../../assets/views/xinnegyuan/7.jpg" alt=""></div>
                        <div class="inn"><img src="../../assets/views/xinnegyuan/8.jpg" alt=""></div>
                        <div class="inn"><img src="../../assets/views/xinnegyuan/9.jpg" alt=""></div>
                        <div class="inn"><img src="../../assets/views/xinnegyuan/10.jpg" alt=""></div>
                    </div>
                    <div class="words">
                        <p><strong>价格</strong><span>5万以下</span><span>5-8万</span><span>12-18万</span><span>18万以上</span>
                        </p>
                        <p><strong>续航</strong><span>200-300</span><span>300-400</span><span>400-500</span><span>500以上</span>
                        </p>
                        <p><strong>类别</strong><span>纯电动</span><span>插电混动</span><span>SUV</span><span>自主品牌</span></p>
                    </div>
                </div>

            </div>
            <div class="line4">
                <div class="up">
                    <p>A</p>
                </div>
                <div class="bot">
                    <img src="" alt="">
                    <p>奥迪</p><span>在售8款<i class="el-icon-arrow-right"></i></span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.big {
    .line1 {
        img {
            width: 355px;
        }
    }

    .line2 {
        height: 160px;
        background-color: white;
        border-radius: 5px;
        box-sizing: border-box;
        padding: 10px;
        overflow: hidden;
        margin-bottom: 20px;

        ::-webkit-scrollbar {
            width: 0px;
        }

        .top {
            display: flex;
            justify-content: space-between;

            p {
                margin: 0;
                font-size: 18px;
                font-weight: 700;
            }

            span {
                font-size: 11px;
                color: #616775;
            }
        }

        .bot {
            height: 160px;
            margin-top: 15px;
            display: flex;
            overflow-x: auto;
            overflow-y: hidden;

            ::-webkit-scrollbar {
                width: 0px;
            }

            .small {
                width: 82px;
                height: 100px;
                display: inline-block;
                flex-shrink: 0;

                img {
                    width: 100%;
                }

                bottom {
                    width: 50px;
                    height: 20px;
                    color: #2C67F1;
                    background-color: #F0F4FD;
                    border-radius: 15px;
                }
            }
        }
    }

    .line3 {
        .up {
            height: 25px;
            display: flex;
            box-sizing: border-box;
            padding: 0 10px;

            >p {
                width: 80px;
                margin: 0;
            }
        }

        .down {
            height: 165px;
            background-color: white;
            border-radius: 5px;
            box-sizing: border-box;
            padding: 10px 10px;
            display: flex;
            justify-content: space-between;
            flex-direction: column;

            .imgs {
                display: flex;
                width: 100%;
                display: flex;
                justify-content: space-between;

                .inn {
                    width: 50px;
                    height: 60px;

                    >img {
                        width: 100%;

                    }
                }
            }

            .words {
                p {
                    display: flex;
                    justify-content: space-between;
                }
            }
        }

    }
}
</style>